import React, { useState } from "react";
import { View, Text } from '@tarojs/components';
import Tabbar from '@/components/Tabbar'
import Taro, { useDidShow, useDidHide } from '@tarojs/taro'
import OrganizationEmpty from "@/components/OrganizationEmpty";
import { backgroundObj } from '@/utils/utils'
import Qa from './components/Qa'
import Allqa from "./components/AllQa";
import QaRecprd from "./components/QaRecprd";
import { fetchHeartBeat } from '@/server/shop'
import './index.scss'
import Router from "@/utils/router";
const QaComponents = (props) => {
    const { data } = props
    const {
        notReadAmount,
        answerAmount,
        askAmount,
        lastMessage = '',
        lastMessageTime,
        qaType,
        subjectName = '',
        teacherName,
        subjectCover,
        id,
        status,
        teacherProfile
    } = data
    let lastMessageData = {}
    const renderRightButton = (e) => {
        if (status === '0' && notReadAmount) {
            return <View className="QaComponents_content_count">
                {notReadAmount ? notReadAmount : ''}
            </View>
        } else if (status === '1' && notReadAmount) {
            return <View className="QaComponents_content_count">  {notReadAmount ? notReadAmount : ''}</View>
        }
        else if (status === '3') {
            return <View className="QaComponents_content_pl">评论</View>
        }
        else if (status === '4') {
            return <View className="QaComponents_content_xl">详情</View>
        }
        return null
    }
    if (lastMessage) {
        lastMessageData = JSON.parse(lastMessage)
    }
    const { contentType = 'text', content } = lastMessageData
    const qaTypeFont = {
        subject: '学科答疑',
        teacherOnline: '找老师答疑',
        recruitmentOnline: '招考答疑',
    }[qaType]
    return <View onClick={() => { Router('MessageDetail', { args: { id } }) }} className="QaComponents_box">

        <View className="QaComponents_list">
            <View style={backgroundObj(teacherProfile)} className="QaComponents_list_profile">
            </View>
            <View className="QaComponents_list_content">
                <View className="QaComponents_content_titleBox">
                    <View className="QaComponents_content_title">
                        {qaTypeFont}
                    </View>
                    <View className="QaComponents_content_tags">
                        {subjectName || teacherName}
                    </View>
                    <View className="QaComponents_content_nextCount">
                        追问 {answerAmount + ' / ' + askAmount}
                    </View>
                    <View className="QaComponents_content_time">
                        {lastMessageTime}
                    </View>
                </View>
                <View className="QaComponents_content_descbox">
                    <View className="QaComponents_content_desc font_hide">{contentType === 'image' ? '[图片]' : content}</View>
                    {renderRightButton()}
                </View>
            </View>
        </View>
    </View>
}
const InteractionConponents = (props) => {
    const { data = {}, } = props
    const { userProfile, operationType, postId, postAnswerId, cover, title, username, messageType, createTime, messageContent = '' } = data
    const { images = '', text } = messageContent.length > 0 ? JSON.parse(messageContent) : {}
    const linkType = {
        likeComment: '点赞了你的评论',
        collectQa: '收藏了你的互动问题',
        collectQaAnswer: '收藏了你的回答',
        comment: '评论了你的问题',
        answer: '回答了你的问题',
        replyComment: '回复了你的评论',
        shareHelpQa: '分享了你的互动',
        shareHelpQaAnswer: '分享了你的回答'
    }[operationType]


    return <View onClick={() => {
        if (messageType === 'userHelpQa') {
            Router('MutualDetail', { args: { id: postId } })
        }
        else {
            Router('MutualAll', { args: { postId, postAnswerId } })
        }
    }}>
        <View className="InteractionConponents_box">
            <View style={backgroundObj(cover)} className="InteractionConponents_profile"></View>
            <View className="InteractionConponents_content">
                <View className="InteractionConponents_content_titleBox">
                    <View className="InteractionConponents_content_title font_hide">{title}</View>
                    {/* <View className="InteractionConponents_content_tags">{title}</View> */}
                    <View className="InteractionConponents_content_time">{createTime}</View>
                </View>
                <View className="InteractionConponents_content_handle">
                    <View style={backgroundObj(userProfile)} className="InteractionConponents_handle_profile"></View>
                    <View className="InteractionConponents_handle_name">
                        {username}
                    </View>
                    <View className="InteractionConponents_handle_share">
                        {linkType}
                    </View>
                </View>
                <View className="InteractionConponents_content_desc">
                    {text}
                </View>
            </View>
        </View>
        <View className="InteractionConponents_liner"></View>
    </View>
}
const SettingConponents = (props) => {
    return <View className="SettingConponents_box">
        <View className="SettingConponents_profile"></View>
        <View className="SettingConponents_content">
            <View className="SettingConponents_content_titleBox">
                <View className="SettingConponents_content_title font_hide">精选答疑</View>
                <View className="SettingConponents_content_time">13:46</View>
            </View>

            <View className="SettingConponents_content_desc font_hide">
                暑期游火爆，文旅企业收入却“令人意外”在下降？
            </View>
        </View>
    </View>
}
const MessageList = (props) => {
    const [active, setActive] = useState('qa')
    const [beat, setBeat] = useState({})
    const {
        helpNewMessageFlag,
        qaNewMessageFlag,
        systemNewMessageFlag,
    } = beat
    const list = [
        {
            label: '答疑',
            value: 'qa',
            beatFlag: qaNewMessageFlag
        },
        {
            label: '互动',
            value: 'allQa',
            beatFlag: helpNewMessageFlag
        },
        {
            label: '系统通知',
            value: 'setting',
            beatFlag: systemNewMessageFlag
        },
    ]
    const RenderMessage = {
        qa: <QaRecprd></QaRecprd>,
        allQa: <Allqa InteractionConponents={InteractionConponents}></Allqa>,
        setting: <View></View>
    }[active]
    const initSetTimeOut = () => {
        if (Taro.getStorageSync("beat")) {
            clearInterval(Taro.getStorageSync("beat"))
            Taro.setStorageSync("beat", null);
        }
        const beat = setInterval(() => {
            heatBeat()
        }, 1500)
        Taro.setStorageSync("beat", beat);
    }
    const clearOut = () => {
        const beat = Taro.getStorageSync("beat");
        if (beat) {
            clearInterval(beat)
            Taro.setStorageSync("beat", null);
        }

    }
    const heatBeat = () => {
        fetchHeartBeat({
            qaBeatHeartType: '1',
            helpBeatHeartType: '1',
            systemBeatHeartType: '1'
        }).then(val => {
            setBeat(val)
        })
    }
    useDidShow((e) => {
        initSetTimeOut()
    })
    useDidHide(() => {
        clearOut()
    })
    return <View className="MessageList_box">
        <Tabbar background={'#F5F7FA'} renderLeft={<View className='MessageList_Select_list'>
            <View className='MessageList_Select_list'>
                {list.map((item, index) => {
                    const { label, value, beatFlag } = item
                    return <View key={index} className='MessageList_Select_listItem'>
                        <View onClick={(e) => {
                            setActive(value)
                        }} className={active !== value ? 'MessageList_Select_item' : 'MessageList_Select_itemSelect'}>
                            {label}
                            {beatFlag === '1' && <View className="MessageList_Select_heatbat"></View>}
                        </View>
                    </View>
                })}
            </View>

        </View>}></Tabbar>
        {RenderMessage}
    </View>
}
const OrganizationTool = (props) => {
    return <OrganizationEmpty title='请先选择机构再查看消息' Tool={MessageList}>
    </OrganizationEmpty>
}

export default OrganizationTool